<template>
	<view>
		<view v-if="!showBrand">
		<!-- 头部搜索栏 -->
		<view class="search">
			<!-- 搜索框 -->
			<view class="input">
				 <p v-if="!searchText">
					 <icon type="search" size="18" class="icon" />
					  输入关键词搜索车商或者车辆
				 </p>
				<input type="text"  v-model="searchText">
			</view>
			<p @click="toSearch">搜索</p>
		</view>
		<!-- 搜索下拉框 -->
		<view class="queryBox" v-if="searchText&&companyList.length">
			<scroll-view scroll-y="true" class="scrollList">
				 <div class="lable" v-for="(item,index) in companyList" :key="index"
				 @click="toCompany(item.id)"
				 >
				   <div class="name">{{item.name}}</div>
				   <div class="address">{{item.address}}</div>
				 </div>
			 </scroll-view>
		</view>
		<!-- 分类 -->
		<view class="navBar">
			<view  v-for="(item,index) in titles" :key="index" @click="clickBar(index) "
			 :class="[currentIndex==(index+1)&&index!=1?'item active':'item']"
			>
				{{item}}
			<i class="iconfont" :class="[currentIndex==(index+1)&&index!=1?'iconfont active':'iconfont']">&#xe614;</i>
			</view>
			<!-- 下拉列表 -->
			<view class="selectContainer" :style="{height:countH}" >
					  <!-- 排序 -->
					  <view class="sortList" :style="{height:currentIndex==1?'auto':0}" v-if="currentIndex==1">
						   <view class="item1" v-for="(item,index) in sortList" :key="index" @click="handleItem(index)" :style="{color:sortselected==index?'#FF3434':''}">{{item}}</view>
					  </view>
					  <!-- 价格 -->
					  <view class="priceList" :style="{height:currentIndex==3?'auto':0}" v-if="currentIndex==3">
						  <view class="name">自定义价格</view>
						  <view class="custom">
							  <view class="box">
								  <input  placeholder="1" type="number" v-model.number="nowOption.onlinePriceMin">万
							  </view>
							  <i></i>
							  <view class="box">
								  <input  placeholder="1" type="number" v-model.number="nowOption.onlinePriceMax">万
							  </view>
							  <view class="btn" @click="doOk">确定</view>
						  </view>
						  <view class="cholist">
						    <!-- 已选状态添加selected类 -->
						    <view class="choItem" :class="priceSelected==0?'selected':''" @click="priceSelected=0">价格最高</view>
						    <view class="choItem" :class="priceSelected==1?'selected':''" @click="priceSelected=1">价格最低</view>
						    <view class="choItem" :class="priceSelected==2?'selected':''" @click="priceSelected=2">不限</view>
						    <view class="choItem" :class="priceSelected==3?'selected':''" @click="priceSelected=3">5万以下</view>
						    <view class="choItem" :class="priceSelected==4?'selected':''" @click="priceSelected=4">5-10万</view>
						    <view class="choItem" :class="priceSelected==5?'selected':''" @click="priceSelected=5">10-20万</view>
						    <view class="choItem" :class="priceSelected==6?'selected':''" @click="priceSelected=6">20-25万</view>
						    <view class="choItem" :class="priceSelected==7?'selected':''" @click="priceSelected=7">25万以上</view>
						  </view>
					  </view>
					  <!-- 筛选 -->
					  <view class="filterList" :style="{height:currentIndex==4?'auto':0}" v-if="currentIndex==4">
						   <scroll-view scroll-y="true" style="height: 67vh;" >
							   <!-- 车型 -->
							   <view class="carType">
								   <view class="name">车型</view>
								   <view class="options" style="justify-content:space-between">
									   <view class="type" v-for="(item,index) in typeOption" @click="selCarType(item,index)" :class="cartype==index?
									   'active':''
									   ">
										   <i class="iconfont icon" v-if="cartype==index">&#xe631;</i>
										    {{item.label}} 
									   </view>
									    
								   </view>
							   </view>
							   <!-- 变速箱 -->
							   <view class="speedType">
								   <view class="name">变速箱</view>
								   <view class="options">
									   <view class="type" style="margin-right:20px" @click="speedtype=0;nowOption.bxc=''" :class="speedtype==0?'active':''">
										   <i class="iconfont icon" v-if="speedtype==0">&#xe631;</i>
										   不限
										</view>
									   <view class="type" style="margin-right:20px" @click="speedtype=1;nowOption.bxc='自动'" :class="speedtype==1?'active':''">
										   <i class="iconfont icon" v-if="speedtype==1">&#xe631;</i>
										   自动</view>
									  <view class="type" @click="speedtype=2;nowOption.bxc='手动'" :class="speedtype==2?'active':''">
										  <i class="iconfont icon" v-if="speedtype==2">&#xe631;</i>
										  手动</view>
								   </view>
							   </view>
							   
							   <!-- 车龄要求 -->
							   <view class="carAge">
								   <view class="name">车龄要求<span style="display: inline-block;margin-left: 10rpx;color: #999;">(单位:年)</span></view>
								   <view class="inputbox">
									   <input type="number" placeholder="最小车龄" v-model.number="minAge"/>
									   <i></i>
									   <input type="number" placeholder="最大车龄" v-model.number="maxAge"/>
								   </view>
							   </view>
							   
							   <!-- 公里数 -->
							   <view class="mileage">
								   <view class="name">公里数<span style="display: inline-block;margin-left: 10rpx;color: #999;">(单位:万公里)</span></view>
								   <view class="inputbox">
									   <input type="number" placeholder="最小公里数" v-model.number="nowOption.mileageMin"/>
									   <i></i>
									   <input type="number" placeholder="最大公里数" v-model.number="nowOption.mileageMax"/>
								   </view>
							   </view>
							   
							   <!-- 排放标准 -->
							   <view class="standards">
								   <view class="name">排放标准</view>
								   <view class="options" style="justify-content: space-between;">
									   <view class="type" v-for="(item,index) in standardOption" :key="index"
									   @click="standardtype=index;index==0? nowOption.paifang='': nowOption.paifang=item"
									   :class="standardtype==index?'active':''"
									   >
									   <i class="iconfont icon" v-if="standardtype==index">&#xe631;</i>
									   {{item}}</view>
								   </view>
							   </view>
							   <!-- 选择颜色 -->
							   <view class="selcolor">
								   <view class="name">选择颜色 <span style="display: inline-block;margin-left: 10rpx;color: #999;">(不限)</span></view>
								   <view class="options " >
									   <view class="type" v-for="(item,index) in colorOpt" :key="index"
									   @click="nowOption.color=item.label;colortype=index"
									   :class="[{'active':colortype==index},item.name]"
									 
									   >
										      <i class="iconfont icon" v-if="colortype==index">&#xe631;</i>
											  {{item.label}}
									   </view>
								   </view>
							   </view>
							   <!-- 按钮组 -->
							   <view class="btns">
								   <view class="reset" @click="reset">重置选项</view>
								   <view class="submit" @click="doOk">确定选项</view>
							   </view>
						</scroll-view>
					  </view>
				 </view>	
		</view>
		
	  <!-- 车辆列表 -->
	  <view class="content" v-if="!nodata">
		   <scroll-view scroll-y="true" style="height: 85vh;" @scrolltolower="loadMore" >
		                   <CarList v-for="item in carList" :key="item.id" :dataList="item" v-if="carList.length"/>
						   <!-- <uni-load-more status="more" :showIcon="showloading"></uni-load-more> -->
		     </scroll-view>
			
	  </view>
		<div v-else style="text-align: center;color:#ccc;font-size: 30rpx;margin-top: 40rpx;">
		  当前没有该款车型！请尝试搜索其他车型
		</div>
		

		
	<!-- 遮罩层 -->
	<view class="mask"  v-show="currentIndex>0&&currentIndex!=2" @click="currentIndex=0"
	></view>
	</view>
	<selectPai  @change="toBrand" v-else @exit="close"/>

		<!-- 遮罩层 -->
		<!-- <view class="mask"  v-show="currentIndex>0" @click="currentIndex=0"
		></view> -->
    
	</view>
</template>

<script>
	 import selectPai from '../../components/selectPai.vue'
	 import CarList from '../../components/carList.vue'
	 // import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		 
		data() {
			return {
				nodata:false,
				isShow:true,
				searchText:'',
				type:0,
				titles:['排序','品牌','价格','筛选'],
				currentIndex:0,
				sortselected:0,
				sortList:['默认排序','价格最高','价格最低','最新发布','最短里程','车龄最短'],   //排序列表
				showBrand:false,
				page:1,
				carList:[],
				 priceSelected:2,
				nowOption:{
				     color:'不限',
				     paifang:'',
				     bxc:'',
				     typeStr:'',
				     mileageMin:'',
				     mileageMax:'',
				     carAgeStart:'',
				     carAgeEnd:'',
				     order:null,
				     brandId:null,
				     onlinePriceMax:'',
				     onlinePriceMin:'',
				},
				colorOpt:[
				     {label:'不限',name:''},
				     {label:'黑色',name:'black'},
				     {label:'白色',name:'white'},
				     {label:'银灰色',name:'grey'},
				     {label:'红色',name:'red'},
				     {label:'深灰色',name:'dgrey'},
				     {label:'香槟色',name:'beige'},
				     {label:'蓝色',name:'blue'},
				     {label:'黄色',name:'yellow'},
				     {label:'棕色',name:'brown'},
				     {label:'绿色',name:'green'},
				     {label:'橙色',name:'orange'},
				     {label:'紫色',name:'violet'},
				     {label:'其他色',name:'other'},
				   ],
				typeOption:[
					{label:'不限'},
				     {label:'SUV'},
				     {label:'两厢'},
				     {label:'三厢'},
				     {label:'单厢'},
				     {label:'皮卡'},
				     {label:'跑车'},
				     {label:'掀背车'},
				   ],
				   standardOption:[
					   '不限','国三','国四','国五'
				   ],
				cartype:0,
				speedtype:0,
				standardtype:0,
				colortype:0,
				isEnd:false,
				showloading:false,
				minAge:'',
				maxAge:'',
				companyList:[]
			};
		},
		components:{selectPai,CarList},
		created(){
			this.getCarList()
		},
		computed:{
			countH(){
				if(this.currentIndex==1){
					return this.sortList.length*100+'rpx'
				}
			
				if(this.currentIndex==3) return '63vh'
				if(this.currentIndex==4) return '67vh'
					return 0
				
			},
		
		},
		
		watch:{
			priceSelected(val){
				if(val==0)	this.nowOption.order = JSON.stringify(['onlinePrice','DESC']);
				if(val==1)   this.nowOption.order = JSON.stringify(['onlinePrice','ASC']);
				if(val==2){
				  this.nowOption.onlinePriceMax = '';
				  this.nowOption.onlinePriceMin = '';
				  this.nowOption.order = null;
				}
				if(val==3){
				  this.nowOption.onlinePriceMax = 5
				  this.nowOption.onlinePriceMin = 0
				}
				 if(val==4) {this.nowOption.onlinePriceMax = 10;this.nowOption.onlinePriceMin = 5}
				 if(val==5) {this.nowOption.onlinePriceMax = 20;this.nowOption.onlinePriceMin = 10}
				 if(val==6) {this.nowOption.onlinePriceMax = 20;this.nowOption.onlinePriceMin = 25}
				 if(val==7) {this.nowOption.onlinePriceMax = '';this.nowOption.onlinePriceMin = 25}
				  this.doOk()
			},
			searchText:function(val){
			  if(val){
			    this.getBatchCompany()
				}
			},
			minAge(val){
				  if(val<0) return  this.minAge = '';
				  console.log(val)
				if(  this.maxAge  && this.minAge > this.maxAge){
				   this.minAge=this.maxAge
				  uni.showToast({
				  	title:'最小车龄不能大于最小车龄',
					icon:'none'
				  })
				   
				}
				const year =  new Date().getFullYear()
				this.nowOption.carAgeEnd = year - val
			},
			maxAge(val){
				  if(val<0) return  this.maxAge = 1;
				if(  this.maxAge  && this.minAge > this.maxAge){
                   this.minAge=this.maxAge
				  uni.showToast({
				  	title:'最大车龄不能小于最小车龄',
					icon:'none'
				  })
				
				}
				const year =  new Date().getFullYear()
				this.nowOption.carAgeStart = year - val
			},
			'nowOption.mileageMin':function(nv){
			  if(  this.nowOption.mileageMax  && this.nowOption.mileageMin > this.nowOption.mileageMax){
			    this.nowOption.mileageMin = this.nowOption.mileageMax
				uni.showToast({
					title:'最大里程不能小于最小里程',
									icon:'none'
				})
			  }
			},
			'nowOption.mileageMax':function(nv){
			
			  if(  this.nowOption.mileageMax  && this.nowOption.mileageMin > this.nowOption.mileageMax){
			    this.nowOption.mileageMin = this.nowOption.mileageMax
			    uni.showToast({
			    	title:'最大里程不能小于最小里程',
			    					icon:'none'
			    })
			  }
			  }
		},
		methods:{
			close(){
				this.showBrand=false;
				uni.showTabBar()
			},
			handleItem(i){
				this.sortselected=i
				if(i==0) this.nowOption.order = null;
				if(i==1) this.nowOption.order = JSON.stringify(['onlinePrice','DESC']);
				if(i==2) this.nowOption.order = JSON.stringify(['onlinePrice','ASC']);
				if(i==3) this.nowOption.order = JSON.stringify(['updateTime','DESC']);
				if(i==4) this.nowOption.order = JSON.stringify(['mileage','ASC']);
				if(i==5) this.nowOption.order = JSON.stringify(['brandDate','DESC']);
				this.doOk()
				this.currentIndex=null
			},
			clickBar(i)	{
				this.currentIndex==i+1?this.currentIndex=0:this.currentIndex=i+1
				if(i==1){
					// uni.navigateTo({
					// 	url:'../../components/selectPai'
					// })
					this.showBrand=true
					uni.hideTabBar()
				}
			},
			
			// 获取车辆列表
			getCarList(){
				let postData = {
				  limit:20,
				  page:this.page,
				  title:this.searchTxt,
				    onlineState: 1,
				    stockState:{
				        $in:[1,2,3,4,5,6]
				    } ,
				  ...this.nowOption,
				}
				 postData.formState = 1
				  if(this.page == 1) uni.showLoading({
				  	title:"1775正在努力的加载"
				  })
				this.myRequest({
					url:'/vc/getCarList',
					method:'POST',
					data:postData
				}).then(res=>{
					if(!res.data.data.list.length){
						this.nodata=true
					}else{
						this.nodata=false
					}
					this.showloading=false
					 uni.hideLoading()
					  if(this.page==1){
					this.carList=res.data.data.list
					}
					res.data.data.list.map( r=>{
					  // 有重复的就不再加载
					  if(this.carList.findIndex(item=> item.id===r.id) === -1) this.carList.push(r)
					})
					this.page++
				})
			},
			doOk(){ //确认
			  this.page =1;
			  this.carList = [];
			  this.currentIndex=0
			  // this.type = 0;
			  this.getCarList()
			},
			// 加载更多
			async loadMore(){ //处理加载更多
			console.log(1)
			   if(this.isEnd) return  uni.showLoading({
				  	title:" 暂时没有更多的加载了哦！"
				  })
				  // this.showloading=true
				  uni.showLoading({
				  	title:"正在加载更多"
				  })
			     await this.getCarList();
			},
			selCarType(item,i){
				if(i){
					this.nowOption.typeStr=item.label
				}else{
					this.nowOption.typeStr=''
				}
				this.cartype=i
				
			},
			// 搜索关键词
			toSearch(){
				this.page =1;
				this.carList = [];
				this.getCarList()
				},
			
			async getBatchCompany(){
			  const _data = await this.myRequest({
				  url:'/car/getBatchCompany',
				  method:'POST',
				  data:{
			         keywords: this.searchText
			      }
			 })
			  const { data, success } = _data.data
			  if(data.length){
				    this.companyList = data
			  }else{
				   this.companyList=''
			  }
			   
			 
			},	
			
			// 查看公司详情
			toCompany(id){
				uni.navigateTo({
					url:'../../components/Company?companyId='+id
				})
			},
			toBrand(val){
				if(!val){
					this.nowOption.brandId = null
				}else{
					
				this.nowOption.brandId = val.brandId
				}
							 this.page = 1
							 this.getCarList()
							 this.showBrand=false;
							 uni.showTabBar()
							 
			},
			
			// 重置表单
			reset(){
				this.nowOption = {
				  color:'不限',
				  paifang:'',
				  bxc:'',
				  typeStr:'',
				  mileageMin:'',
				  mileageMax:'',
				  order:null,
				  onlinePriceMax: '',
				  onlinePriceMin: ''
				}
				this.minAge  = '';
				this.maxAge = '';
				this.sortselected = 0
				this.speedtype=0
				this.cartype=0
				this.priceSelected=2
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	
.search{
	padding: 12rpx 32rpx;
	display: flex;
	flex-direction: row;
	z-index: 10;
	position: relative;
	background: #fff;
	.input{
	  height: 72rpx;
		width: 0;
		flex-grow: 1;
		border-radius: 36rpx;
		background: rgba(238, 238, 238, 0.6);
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		p{
			font-size: 28rpx;
			color: #999;
			display: flex;
			justify-content: center;
			align-items: center;
			.icon{
				height: 100%;
				display: flex;
				align-items: center;
				margin-right: 10rpx;
			}
		}
		input{
			position: absolute;
			left: 0;
			top: 0;
			padding: 0 32rpx;
			font-size: 28rpx;
			text-align: center;
			height: 100%;
			width: 590rpx;
		}
	}
	p{
		margin-left: 32rpx;
		line-height: 72rpx;
		font-size: 36rpx;
	}
}

.scrollList{
	position: fixed;
	top: 192rpx;
	left: 0;
	height: 85%;
	width: 100%;
	z-index: 999;
	background: #fff;
	.showtitle{
	  height: 96rpx;
	}
	.noresult{
	  height: 96rpx;
	  background: #fff;
	}
	.lable{
	  box-sizing: border-box;
	  padding: 20rpx 32rpx;
	  background: #fff;
	  border-bottom: 1rpx solid rgba(0,0,0,0.1);
	  .name{
	    font-size: 30rpx;
	    color:#333
	  }
	  .address{
	    margin-top: 20rpx;
	    font-size: 24rpx;
	    color:#666
	  }
	}
	.lable:last-child{
	  border-bottom: none;
	}
}

.navBar{
	display: flex;
	 z-index: 10;
	  background: #fff;
	height: 80rpx;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	align-items: center;
	justify-content: center;
	position: relative;
	.item{
     flex: 1;	
		display: flex;
		justify-content: center;
		align-items: center;
		color: #333;
		font-size: 28rpx;
		i{
			margin-left: 8rpx;
			font-size: 20rpx;
			color: #999;
		}
		i.active{
			transform: rotate(180deg);
			color:#FF3434;
		}
	}
	.item.active{
	  color:#FF3434;
	}
	.selectContainer{
		 width: 100%;
		 position: absolute;
		background: #fff;
		  border: 1px solid rgba(0,0,0,.2);
		transition: all .3s;
			overflow: hidden;
	top:80rpx;
	left:0;
	.sortList{
		// height: auto;
		transition: all .3s;
		.item1{
			width: 718rpx;
			margin: 0 auto;
			height: 100rpx;
			border-bottom: 1rpx solid rgba(0,0,0,0.1);
			line-height: 100rpx;
			font-size: 28rpx;
			color: #333;
		}
				
	}
			
	}
}

// 遮罩层
.mask{
    width: 100%;
    height: 80%;
    position: fixed;
    top: 200rpx;
    left: 0;
    z-index: 9;
    background: rgba(0,0,0,0.3);
  }
  
  



.selectContainer{
	height: 0;
	transition: height 1s;
	.sortList{
		
		.item{
			width: 718rpx;
			margin: 0 auto;
			height: 100rpx;
			border-bottom: 1rpx solid rgba(0,0,0,0.1);
			line-height: 100rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
}

// 价格下拉列表
.priceList{
	.name{
	  line-height: 1;
	  font-size: 28rpx;
	  color: #333;
	  padding: 25rpx 32rpx;
	  background: #fff;
	}
	.custom{
		padding: 0 32rpx;
		margin: 0 auto;
		background: #fff;
		display: flex;
		align-items: center;
		.box{
			display: flex;
			align-items: center;
			width: 192rpx;
			height: 56rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			background: rgba(238,238,238,0.6);
			font-size: 28rpx;
			color: #999;
			input{
			  color: #333;
			  text-align: center;
			  border: none;
			  width: 0;
			  flex-grow: 1;
			  margin-right: 10rpx;
			  background: none;
			  font-size: 24rpx;
			}
		}
		i{
		  display: block;
		  width: 32rpx;
		  height: 2rpx;
		  background: rgba(0,0,0,0.1);
		  margin: 0 34rpx;
		}
		.btn{
		  margin-left: 84rpx;
		  width: 116rpx;
		  height: 56rpx;
		  line-height: 56rpx;
		  text-align: center;
		  background: #FF3434;
		  border-radius: 8rpx;
		  color: #fff;
		  font-size: 28rpx;
		}
	}
	.choItem{
	  width: 718rpx;
	  margin: 0 auto;
	  height: 85rpx;
	  border-bottom: 1px solid rgba(0,0,0,0.1);
	  line-height: 100rpx;
	  font-size: 28rpx;
	  color: #333;
	}
	.selected{
	  color:#FF3434 ;
	}
	.choItem:last-child{
	  border-bottom: none;
	}
}

.filterList{
	padding: 0 32rpx;
	.carType{
		padding-top: 40rpx;
		
	}
	.name{
	color: #333;	
	font-size: 32rpx;;
	}
	.options{
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
	}
	.type{
		width: 160rpx;
		height: 60rpx;
		border: 1rpx solid #999;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 16rpx;
		border-radius: 8rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		
		.icon{
		 position: absolute;
			 right: 0;
			 top: 0;
			 font-size: 20rpx;
			 color: #fff;
			 background:#FF3434 ;
			 border-radius: 30%;
		}
	}
	.type.active{
		border-color: #FF3434;
		color: #FF3434;
	}
	.speedType{
		margin-top: 60rpx;
		}
	.carAge{
		margin-top: 60rpx;
	
		
	}
	.inputbox{
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		input{
		  width: 192rpx;
		  height: 56rpx;
		  border: none;
		  background: #eee;
		  color: #333;
		  text-align: center;
		  line-height: 56rpx;
		  border-radius: 36rpx;
		  padding: 0 32rpx;
		  box-sizing: border-box;
		  font-size: 26rpx;
		}
		input::placeholder{
		  color: #999;
		}
		i{
		  display: block;
		  width: 32rpx;
		  height: 2rpx;
		  margin: 0 34rpx;
		  background: rgba(0,0,0,0.1);
		}
	}
	.mileage{
		margin-top: 60rpx;
	}
	.standards{
		margin-top: 60rpx;
	}
	.selcolor{
		margin-top: 60rpx;
        .type{
			margin-right: 14rpx;
		}
			.type:nth-child(4n+4){
				margin-right: 0;
			}
		.black{
		  color: #fff;
		  background: #000;
		}
		.grey{
		  color: #fff;
		  background: #C1C2C4;
		}
		.red{
		  color: #fff;
		  background: #C70C01;
		}
		.dgrey{
		  color: #fff;
		  background: #585858;
		}
		.beige{
		  color: #fff;
		  background: #CD8034;
		}
		.blue{
		  color: #fff;
		  background: #024D98;
		}
		.yellow{
		  color: #fff;
		  background: #EBE41B;
		}
		.brown{
		  color: #fff;
		  background: #48280B;
		}
		.green{
		  color: #fff;
		  background: #009947;
		}
		.orange{
		  color: #fff;
		  background: #E94034;
		}
		.violet{
		  color: #fff;
		  background: #4F314F;
		}
		.choTag{
		  border-color: #FF3434;
		  color: #FF3434;
		}
		.is-checked{
		  border-color: #FF3434;
		  color: #FF3434;
		}
		.choTag::after{
		  content: '';
		  width: 0;
		  height: 0;
		  border-width: 0 vw(28) vw(28) 0;
		  border-style: solid;
		  border-color: transparent #FF3434;
		  position: absolute;
		  top: 0;
		  right: 0;
		}
		}
		
	.btns{
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.reset{
		  width: 336rpx;
		  height: 88rpx;
		  border-radius: 16rpx;
		  text-align: center;
		  line-height: 88rpx;
		  border: 1rpx solid #FF3434;
		  color: #FF3434;
		  font-size: 32rpx;
		}
		.submit{
		  background: #FF3434;
		  color: #fff;
		  width: 336rpx;
		  height: 88rpx;
		  border-radius: 16rpx;
		  font-size: 32rpx;
		  text-align: center;
		  line-height: 88rpx;
		}
	}
		
}
</style>
